<template>
	<view>
		<!-- <view @click="showDate = true" class="date_new">{{
			newDate == '' ? '选择需要查看信息的时间段' : newDate
		}}</view> -->
		<view class="tabsStyle"
			><u-tabs
				active-color="#5268d4"
				:list="tabList"
				:current="current"
				:bar-style="barStyle"
				:bar-width="100"
				:is-scroll="false"
				@change="tabChange"
			></u-tabs
		></view>
		<!-- 充值记录 -->
		<view v-if="current == 0">
			<view style="margin-top: 40rpx" v-if="outpatientList.length > 0">
				<view
					class="message_box"
					v-for="(item, index) in outpatientList"
					:key="index"
					@click="outpatientClick(item)"
				>
					<view class="message_name"> </view>
				</view>
			</view>

			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<!-- 退款记录 -->
		<view v-if="current == 1">
			<view v-if="hospitalized.length > 0">
				<view style="border: 1px solid #ccc"></view>
				<view
					class="message_box"
					v-for="(item, index) in hospitalized"
					:key="index"
					@click="returnPremium(item)"
				>
					<view class="message_name">
						<view class="content">
							<view style="width: 15%"
								><u-icon name="rmb-circle" size="100" color="#5690FB"></u-icon
							></view>
							<view style="flex: 1; padding-left: 40rpx">
								<view>{{ item.title }}</view>
								<view>{{ item.timeDate }}</view>
							</view>
							<view>{{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>

			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<view class="safe"></view>
		<u-calendar
			v-model="showDate"
			ref="calendar"
			:start-text="startText"
			:end-text="endText"
			:range-color="rangeColor"
			:range-bg-color="rangeBgColor"
			:active-bg-color="activeBgColor"
			@change="changeTime"
			:mode="mode"
		></u-calendar>
	</view>
</template>

<script>
import { transactionRecord } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			// 日期选择
			showDate: false,
			mode: 'range',
			startText: '开始',
			endText: '结束',
			rangeColor: '#2979ff',
			rangeBgColor: 'rgba(41,121,255,0.13)',
			activeBgColor: '#2979ff',
			newDate: '',
			// 门诊
			outpatientList: [],
			hospitalized: [],
			tabList: [{ name: '充值记录' }, { name: '退款记录' }],
			current: 0,
		}
	},
	onLoad() {
		this.transactionRecordData(this.orgId, this.patientIdentity)
	},
	computed: {
		...mapState({
			orgId: state => state.orgId,
			patientId: state => state.patientId,
			orgCode: state => state.orgCode,
			patientIdentity: state => state.patientIdentity,
		}),
	},
	methods: {
		changeTime(e) {
			this.newDate = e.startDate + '-' + e.endDate
		},
		transactionRecordData(orgId, idCard) {
			transactionRecord({ orgId: orgId, idCard: idCard }).then(({ data }) => {
				console.log(data)
			})
		},
		tabChange(index) {
			console.log(index)
			this.current = index
		},
		returnPremium() {
			console.log('测试')
			this.$router.navigateTo({
				url: '/pages/onlineTrading/particulars',
			})
		},
		outpatientClick(item) {
			console.log('123')
			this.$router.navigateTo({
				url: '',
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
.date_new {
	margin-top: 40rpx;
	border-width: 1px;
	border-color: #ecf5ff;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #2979ff;
	color: #fff;
	font-size: 16px;
	/* display: inline-block; */
	text-align: center;
}
.message_box {
	display: flex;
	padding: 20rpx;
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #ccc;
	.message_name {
		flex: 1;
		font-size: 30rpx;
	}
}
.content {
	display: flex;
	padding: 10px;
	background: #fff;
	align-items: center;
}
</style>